<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="boprp.css">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
	<script src="https://www.google.com/jsapi" type="text/javascript"></script>
	<script src="/infobox.js" type="text/javascript"></script>
    <script src="/boprp.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()"> 
	<div id="map_canvas" style="width:100%; height: 100%;"></div>
	<div id="container" name="container">
		<div id="menu-top">
			<div id="logo">
				<img id="boprp-logo" src="boprp_logo.png">
			</div>
			<div id="about"><img id="about-button" src="question.gif" onmouseover="showAbout()" onmouseout="showAbout()"></div>
		</div>
		<div id="boprp-form">
			<form name="boprp-form" >
				<div id="cause-select">
				<p class="bold">Cause:</p>
					<input id="checkbox1" type="checkbox" name="cause" class="css-checkbox" value="A" />
					<label for="checkbox1" name="label1" class="css-label"> Abandonment on Arab Orders</label><br>
					<input id="checkbox2" type="checkbox" name="cause" class="css-checkbox" value="C" />
					<label for="checkbox2" name="label2" class="css-label">	Influence of nearby town's fall</label><br>
					<input id="checkbox3" type="checkbox" name="cause" class="css-checkbox" value="E" />
					<label for="checkbox3" name="label3" class="css-label"> Expulsion by Jewish forces</label><br>
					<input id="checkbox4" type="checkbox" name="cause" class="css-checkbox" value="F" />
					<label for="checkbox4" name="label4" class="css-label"> Fear of being caught up in fighting</label><br>
					<input id="checkbox5" type="checkbox" name="cause" class="css-checkbox" value="M" /> 
					<label for="checkbox5" name="label5" class="css-label"> Military assault on settlement</label><br>
					<input id="checkbox6" type="checkbox" name="cause" class="css-checkbox" value="W" />
					<label for="checkbox6" name="label6" class="css-label"> Whispering campaigns - psychological warfare</label>
				</div><br>
				<div id="date-select">
					<p class="bold">Date:</p>
					<input type="date" class="date-box" id="begin-date" value="1947-11-29" min="1947-11-01" max="1949-11-01"><br>
					<input type="date" class="date-box"id="end-date" value="1949-07-20" min="1947-11-01" max="1949-11-01">
				</div>
				<div id="wave-select">
					<p class="bold">Wave:</p>
					<label class="select-box">
						<select id="wave-selectbox" onchange="setWave()">
							<option value="First Wave">First Wave</option>
							<option value="Second Wave">Second Wave</option>
							<option value="Third Wave">Third Wave</option>
							<option value="Fourth Wave">Fourth Wave</option>
							<option value="Post Nov 1948">Post Nov 1948</option>
							<option value="1947-1949" selected>1947-1949</option>
						</select>
					</label>
				</div><br><br><br><br><br><br>
				<input type="button" class="button" Value="Submit" onclick="setMarkers()">
				<input id="accuracy" type="checkbox" name="accuracy" class="css-checkbox" value="accuracy" />
				<label for="accuracy" name="label7" class="css-label">Accurate Check</label><br><br>
			</form>
		</div>
	</div>
  </body>
</html>